<template>
	<view class="base">
		<view class="login" v-if="userInfo">
			<image @click="onSetting" src="/static/images/icon/options.png" class="option"></image>
			<view class="login-img">
				<img src="/static/images/banner/banner01.jpg" alt="">
			</view>
			<view class="login-name">
				{{userInfo.nickname}}
			</view>
		</view>
		<view class="login" v-else>
			<button class="clickLogin" @click="onLogin"> 请点击登录</button>
		</view>
		<view class="options">
			<view class="order-view">我的订单
				<button class="order-button" @click="onAllOrder">全部订单</button>
			</view>
			<view class="options-item" @click="onObligation">
				<image class="options-img" src="../../static/images/icon/obligation.png" mode=""></image>
				待付款
			</view>
			<view class="options-item" @click="onInvoice">
				<image class="options-img" src="/static/images/icon/invoice.png" mode=""></image>发票管理
			</view>
			<view class="options-item" @click="onRefund">
				<image class="options-img" src="/static/images/icon/refund.png" mode="">申请退款
			</view>
			<view class="options-item" @click="onHelp">
				<image class="options-img" src="/static/images/icon/service.png" mode="">客服
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: '',
			}
		},
		methods: {
			onObligation() {
				this.$tab.navigateTo('/pages/mine/orderManagement/obligation')
			},
			onLogin() {
				this.$tab.navigateTo('/pages/mine/login/login')
			},
			onAllOrder() {
				this.$tab.navigateTo('/pages/mine/orderManagement/allOrder')
			},
			onHelp() {
				this.$tab.navigateTo('/pages/mine/help/index')
			},
			onRefund() {
				this.$tab.navigateTo('/pages/mine/refund/refundOrder')
			},
			onSetting() {
				this.$tab.navigateTo('/pages/mine/setting/index')
			},
			onInvoice() {
				this.$tab.navigateTo('/pages/mine/invoice/invoice')
			},
			islogin() {
				if (uni.getStorageSync('userInfo')) {
					this.userInfo = uni.getStorageSync('userInfo')
				}
			}
		},
		onShow() {
			this.islogin()
		}
	}
</script>

<style lang="scss">
	.base {
		padding: 0;
		margin: 0;
		font-family: "Arial";
		background-color: #65A8F2;
		position: relative;

	}

	.login {
		height: 45vh;
		width: 100%;
		padding-top: 120rpx;

		.option {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			right: 20rpx;
			top: 10rpx;
		}

		.login-img {
			height: 240rpx;
			width: 240rpx;
			margin: auto;


			img {
				width: 100%;
				height: 100%;
				border-radius: 180rpx;
			}

		}

		.login-name {
			width: 100%;
			text-align: center;
			height: 80rpx;
			font-size: 36rpx;
			line-height: 80rpx;

		}
	}

	.clickLogin {
		width: 300rpx;
		height: 100rpx;
		line-height: 100rpx;
		border: 2rpx solid #ccc;

	}

	.options {
		height: 55vh;
		width: 100%;
		background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;


		.order-view {
			height: 7vh;
			width: 100%;
			padding: 0 30rpx;
			font-size: 32rpx;
			line-height: 7vh;
			display: flex;
			font-family: PingFangSC-regular;
			justify-content: space-between;
			border-bottom: 2rpx solid #ccc;

			.order-button {
				width: 180rpx;
				height: 60rpx;
				margin: auto 0;
				line-height: 60rpx;
				border-radius: 50rpx;
				font-size: 28rpx;
				background-color: #65A8F2;
			}
		}

		.options-item {
			height: 12vh;
			font-size: 40rpx;
			line-height: 10vh;
			padding: 0 30rpx;
			background: url('../../static/images/icon/forward.png') 90%/50rpx 50rpx no-repeat;

			.options-img {
				width: 7vh;
				height: 7vh;
				margin-right: 36rpx;
				vertical-align: middle;
			}
		}

	}
</style>
